<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
    <style>
        body {
            background-color: #F4F4F4;
        }

        .outer {
            background-color: #FFFFFF;
            height: 64px;
            line-height: 64px;
            margin-top: 10.5px;
        }

        .inner {
            margin: 0 17.5px;
        }

        .avatar {
            width: 45.5px;
            height: 45.5px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
        }

        .arrow {
            width: 22px;
            height: 64px;
            background: url(__IMG__/right_arrow.png) no-repeat right center;
            background-size: 7.5px 12.8px;
        }

        .outer1 {
            background-color: #FFFFFF;
            height: 45px;
            line-height: 45px;
        }

        input[type="text"] {
            height: 43.9px;
            width: 100%;
            background-color: #fff;
            text-align: right;
            color: #545454;
            font-size: 14px;
            padding-right: 0;
        }

        input::-webkit-input-placeholder {
            color: #999;
            font-size: 14px;
        }

        .outer2 {
            background-color: #FFFFFF;
            height: 123px;
        }

        .title{
            color:#555555;
            font-size:15px;

        }

    </style>
    <style>
        .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.7rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-icon-tu{
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__/left.png') no-repeat center center;
            background-size: 10px 17.5px;
        }
    </style>
</head>

<body>

<header class="aui-bar aui-bar-nav underLine">
    <a class="aui-pull-left" tapmode="active" onclick="gomyindex()"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">个人信息</div>
    <!--<a class="aui-pull-right" >
    <span class="aui-iconfont" tapmode="active" onclick="right()">保存</span>
    </a>-->
</header>
<div class="outer">
    <div class="inner underLine flex-wrap" onclick="header();">
        <div class="title">头像</div>
        <div class="flex-con"></div>
        <div>
            <img src="{$user.user_image ?? '__IMG__/avatar.png'}" class="avatar" id='imggg'/>
        </div>
        <div class="arrow"></div>
    </div>
</div>


<div class="outer1" onclick="fnName(this)">
    <div class="inner underLine flex-wrap">
        <div class="title">昵称</div>
        <div class="flex-con">
            <input type="text" id="nicheng" readonly value="{$user.user_username}" placeholder="点击添加" />
        </div>
    </div>
</div>



<div class="outer1">
    <div class="inner underLine flex-wrap">
        <div class="title">手机号</div>
        <div class="flex-con">
            <input type="text" id="user_phone" readonly placeholder="请填写手机号" value="{$user.user_phone}"/>
        </div>
    </div>
</div>
<input type="hidden" id="uid" value="{$user.user_id}" />
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function gomyindex() {
        location.href = '{:url("My/index")}';
    }
    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'chooseImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData',
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
    })
    //上传头像
    var header = function(){
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var zzz = res.localIds;
                wx.uploadImage({
                    localId: zzz.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        wx.downloadImage({
                            serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                            success: function (res) {
                                wx.getLocalImgData({
                                    localId: res.localId, // 图片的localID
                                    success: function (res) {
                                        $('#imggg').attr('src',zzz);
                                        userinfoAjaxChange('user_image',res.localData);
                                    }
                                });
                            }
                        });
                    }
                });
            }
        })
    }
    /**
     * ajax更改
     * */
    function userinfoAjaxChange(name,value) {
        var uid = $('#uid').val();
        $.ajax({
            url: '{:url("My/AjaxUserCenter")}',
            data: 'name=' + name + '&value=' + value + '&uid=' + uid,//
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                return true;
            },
            error: function () {
                alert('Ajax error!');
            }
        })
    }
    function fnName() {
        var uid = $('#uid').val();
        location.href = '{:url("My/updateName")}?uid='+uid;
    }
</script>

</html>
